<template>
	<section class="scholl border-box bg-white" >
		<div class="border-b">
			<scroll-navbar :channels="channels" v-model="selected" key-name="text"  key-id="id"></scroll-navbar>
		</div>	
		<ul class="goods-list"
		v-infinite-scroll="loadData" 
		infinite-scroll-disabled="loading" 
		infinite-scroll-distance="10" 
		v-if="flag">
			<li v-for="(item, index) in goods_list" :key="index" class="border-b20"> 
				<div class="pt30rem pb30rem pb30rem">
					<div class="layout layout-juscon fs26rem c999 pl30rem pr30rem pb15rem">
						<span>
							{{item.sign_time, "yyyy-MM-dd" | formatDate}}
						</span>						
					</div>
					<router-link tag="div" :to="'/detail/experience-detail/' + item.goods_id +'?status=2'" class="pl30rem pr30rem pb15rem pt15rem layout layout-juscon goods-info grey-bg">
						<img class="goods-img" :src="img_url+item.goods_picture">
						<div>
							<div class="goods-name ">
								<strong class="bold fs32rem">
									{{item.goods_name}}
								</strong>
								<p class="time c999 fs24rem">
									<div class='goods-color' >
										<span v-if="item.spec_name.length">
											{{item.spec_name}}											
										</span>
									</div>
								</p>
								<p class="bold red fs34rem">
									{{item.price}} &emsp;
									<small class="c999 old-money fs20rem">
										原价:{{item.price}}
									</small>
								</p>
							</div>												
						</div>
						<i class="iconfont icon-right2 fs20rem color999"></i>
					</router-link>
					<div class="align-right pt30rem pr30rem">
						<span class="fs18rem" v-if="selected=='0'">
							{{ item.balance_days }}天以内付完成星评
						</span>
						<router-link 
							v-if="selected == '0' " 
							:to="'edit?sku_id='+item.sku_id+'&judge_id='+item.judge_id+'&order_id='+item.order_id+'&goods_id='+item.goods_id"
						>
							<button class="payMoney white fs28rem">
								<span >
									体验评星
								</span>								
							</button>
						</router-link>
						<router-link 
							v-else 
							:to="'detail?goods_id='+item.goods_id+'&judge_id='+item.judge_id"
						>
							<button class="payMoney white fs28rem">								
								<span>
									查看评星
								</span>
							</button>
						</router-link>
					</div>
				</div>
			</li>
		</ul>	
		<template v-else>
			<default :imgUrl="img" explain="暂无评星信息"></default>
		</template>		
	</section>
</template>

<script>
	import ScrollNavbar           from '@/components/Scroll-navbar';
	import { formatDate } 	  	  from '@/utils/index';	
	import { exprienceJudgeStar } from '@/api/ordering';
	import { InfiniteScroll } 	  from 'mint-ui';
	import Default from '@/components/Default';
	export default {
		components:
		{
			ScrollNavbar,
			Default
		},
		directives:{
			InfiniteScroll
		},
		filters:
		{
			formatDate(time, fmt)
			{
				time*=1000;
				let date = new Date(time);
				return formatDate(date,fmt)
			}
		},
		data() 
		{
			return{
				selected   : '0',
				goods_list : [],
				loading    : false,
				img_url    : process.env.IMG_URL,
				loading    : false,
				flag       : true,
				page       : 1,
				img        : require('../../../assets/icon-goods2.png'),
				channels:
				[ 
					{ id: '0', text: '待完成'},
					{ id: '1', text: '已完成'}
				],
				
			}
		},
		methods:
		{
			loadData()
			{
				// 防止多次加载,loading = true,阻止加载
				this.loading = true;
				var params = {
					uid             : localStorage.getItem('uid'),
					complete_status : this.selected,
					page            : this.page++,
					item            : 10
				}
				exprienceJudgeStar(params).then( res => {
					if(res.data.length > 0)
					{
						this.goods_list = res.data;
						this.loading    = false;
					}					
					else if (params.page > 1)
					{
						$toast('没有更多了');
					}
					else
					{
						this.flag = false;
					}
					if(res.data.length < params.item)
					{
						this.loading = true;
					}
				});
			},
			initData()
			{
				this.page = 1;
				this.goods_list  = [];
				this.flag = true;
				this.loadData();
			}
		},
		watch:{
			selected(val)
			{
				this.initData();
			}
		}
	}
	
</script>

<style lang="less">
	.border-box{
		box-sizing: border-box;
		#scroll-navbar{
			.mint-navbar{
				width: 100%;
			}
		}
		.goods-list{
			.red{
				color: #ff0036;
			}
			.grey-bg{
				background-color: #f5f5f5;
			}
			.goods-img{
				width: 120/28rem;
				height: 120/28rem;
			}
			.goods-info{				
				.goods-name{
					height: 120/28rem;
					width: 500/28rem;
					line-height: 1.4;
					overflow: hidden;
					.goods-color{
						display: inline-block;
						width: 160/28rem; 
					}
					.old-money{
						text-decoration: line-through;
					}
				}
				.buy-station{
					width: 95/28rem;
					height: 37/28rem;
					background-color: #ffe5eb;
				}
			}
			.payMoney{
				padding: 14/28rem 28/28rem;
				background-color: #ff0036;
				border-radius: 5px;
			}
		}
	}
	.border-box * {
		box-sizing: border-box;
	}
	
	
</style>

